<template>
    <div class="content">
        <div class="title">工单评价</div>
        <div class="search">
            <input class="searchIpt" v-model="searchPlayer" type="text">
            <div class="searchBtn" @click="searchContest">
                <img src="/public/images/搜索.png" alt="">
            </div>
        </div>

        <a-table :columns="workOrderForm" :data-source="WorkOrderData" :pagination="pagination">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'operation'">
                    <div class="operationTd">
                        <img src="/public/images/比赛管理/详情.png" alt="">
                        <img src="/public/images/比赛管理/编辑.png" alt="">
                    </div>
                </template>
            </template>
        </a-table>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const searchPlayer = ref()
function searchContest() {
    let searchList: any = []
    WorkOrderData.value.forEach(element => {
        if (element.UserId.includes(searchPlayer.value)) {
            searchList.push(element)
        }
    });
    WorkOrderData.value = searchList
}
const pagination = {
    pageSize: 9,
    showQuickJumper: true,
    locale: {
        jump_to: '前往',
        page: '页',
    },
}
const workOrderForm = [
    {
        title: '序号',
        dataIndex: 'Id',
        key: 'Id',
        width: '16%',
    },
    {
        title: '选手号',
        dataIndex: 'UserId',
        key: 'UserId',
        width: '16%',
    },
    {
        title: '评分裁判',
        dataIndex: 'GradingGudger',
        key: 'GradingGudger',
        width: '16%',
    },
    {
        title: '提交时间',
        dataIndex: 'submitTime',
        key: 'submitTime',
        width: '16%',
    },
    {
        title: '总得分',
        key: 'Score',
        dataIndex: 'Score',
        width: '16%',
    },
    {
        title: '操作',
        key: 'operation',
        width: '18%',
    },
];
const WorkOrderData = ref([
    {
        key: 1,
        Id: 1,
        UserId: '001',
        GradingGudger: '裁判001',
        submitTime: '2024-08-20 18:06:08',
        Score: '41分',
    },
    {
        key: 2,
        Id: 2,
        UserId: '002',
        GradingGudger: '裁判002',
        submitTime: '2024-08-20 18:06:08',
        Score: '42分',
    },
    {
        key: 3,
        Id: 3,
        UserId: '003',
        GradingGudger: '裁判003',
        submitTime: '2024-08-20 18:06:08',
        Score: '43分',
    },
    {
        key: 4,
        Id: 4,
        UserId: '004',
        GradingGudger: '裁判004',
        submitTime: '2024-08-20 18:06:08',
        Score: '44分',
    },
    {
        key: 5,
        Id: 5,
        UserId: '005',
        GradingGudger: '裁判005',
        submitTime: '2024-08-20 18:06:08',
        Score: '45分',
    },
    {
        key: 6,
        Id: 6,
        UserId: '006',
        GradingGudger: '裁判006',
        submitTime: '2024-08-20 18:06:08',
        Score: '46分',
    },
    {
        key: 7,
        Id: 7,
        UserId: '007',
        GradingGudger: '裁判007',
        submitTime: '2024-08-20 18:06:08',
        Score: '47分',
    },
    {
        key: 8,
        Id: 8,
        UserId: '008',
        GradingGudger: '裁判008',
        submitTime: '2024-08-20 18:06:08',
        Score: '48分',
    },
    {
        key: 9,
        Id: 9,
        UserId: '009',
        GradingGudger: '裁判009',
        submitTime: '2024-08-20 18:06:08',
        Score: '49分',
    },
    {
        key: 10,
        Id: 10,
        UserId: '010',
        GradingGudger: '裁判010',
        submitTime: '2024-08-20 18:06:08',
        Score: '410分',
    },
]);
</script>
<style scoped>
.content {
    width: 1860px;
    height: 825px;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 0 25px 0 34px;
    position: relative;
}

.title {
    font-size: 26px;
    margin-top: 29px;
    margin-left: 16px;
}

.export {
    outline: none;
    border: none;
    border-radius: 5px;
    width: 148px;
    height: 48px;
    background-color: #4080ff;
    font-size: 24px;
    text-align: center;
    line-height: 48px;
    color: #ffffff;
    position: absolute;
    top: 24px;
    right: 16px;
}

.operationTd {
    display: flex;
    justify-content: space-around;
    margin: auto;
}

.operationTd>img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* 组件表格样式 */
:deep().ant-table-wrapper {
    border: 1px solid #f7f7f7;
    border-radius: 4.8px;
    margin-top: 30px;
}

:deep().ant-table-thead>tr>th {
    text-align: center;
    background-color: #f2f3f5;
    font-size: 18px;
}

:deep().ant-table table {
    text-align: center;
    font-size: 18px;
}

:deep().ant-table-tbody>tr>td {
    border: none;
}

:deep().ant-table-thead>tr>th {
    border: none;
}

:deep().ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    width: 0px;
}

:deep().ant-table-container table>thead>tr:first-child th:first-child {
    border-top-left-radius: 5px;
}

:deep().ant-table-container table>thead>tr:first-child th:last-child {
    border-top-right-radius: 5px;
}

:deep().ant-table-pagination.ant-pagination {
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translate(-50%);
    top: 670px;
}

:deep().ant-pagination-item-active a {
    color: #ffffff;
    background-color: #4080ff;
    width: 32px;
    height: 32px;
    border-radius: 2px;
}

:deep().ant-pagination-item-active {
    border: none;
    border-radius: 4px;
}

:deep().ant-pagination-options-quick-jumper input:focus,
.ant-pagination-options-quick-jumper input-focused {
    border-right-width: 0.00521rem;
    outline: 0;
    text-align: center;
    background-color: #4080ff;
    border-radius: 3px;
    color: #ffffff;
    width: 47px;
}

:deep().ant-pagination-options-quick-jumper input {
    width: 45px;
}

:deep().ant-pagination-options-quick-jumper input:focus,
.ant-pagination-options-quick-jumper input-focused {
    box-shadow: none;
}

.search {
    width: 433px;
    height: 48px;
    border-radius: 3px;
    background-color: #f2f3f5;
    position: absolute;
    top: 20px;
    right: 25px;
    display: flex;
}

.searchIpt {
    width: 385px;
    height: 48px;
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: 20px;
    letter-spacing: 2px;
}

.searchBtn {
    width: 48px;
    height: 48px;
    border-radius: 3px;
}

.searchBtn>img {
    width: 24px;
    height: 24px;
    margin-top: 11.9px;
    margin-left: 11.9px;
}
</style>